<html>
	<head>
		<title>
			test
		</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			a.move {
				z-index: 2;
				position: absolute;
				height: 28px;
				width: 28px;
				display: inline-block;
				border: 1px #aaa solid;
				border-radius: 5px;
				background-color: white;
				text-align: center;
				text-decoration:  none;
				color: black;
			}
			a.move:hover {
				background-color: #aaa;
			}
			a.move.left {
				top: 0;
				left: 0;
			}
			a.move.right {
				top: 0;
				left: 370px;
			}
			ul#shifting li {
				display: inline-block;
				height: 30px;
				width: 335px;
				border-right: 1px #aaa solid;
				margin-left: 35px;
			}
			
			div.slidingList_outer{
				z-index: 1;
				position: relative;
				width: 741px;
				height: 30px;
				border: 4px #24a solid;
				overflow: hidden;
			}
			div.slidingList_inner{
				position: relative;
				width: 1200px;
				height: 30px;
			}
			
		</style>
		<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
			var current = 0;
			var total = 0;
			var wait = 0;
			var width = 335;
			var margin = 35;
			function next(){
				if(wait || current == total - 1) return;
				wait=1;
				$('#shifting li:eq(' + (current + 2) + ')').show();
				$('#shifting li:eq(' + (current + 0) + ')').animate({
					marginLeft: "-" + (width) + "px"
				  }, 1000, function(){update(+1);});
			}
			function prev(){
				if(wait || current == 0) return;
				//alert('???');
				wait=1;
				$('#shifting li:eq(' + (current - 1) + ')')
					.css('margin-left' , '-' + width)
					.show()
					.animate({
						marginLeft: margin}, 1000, function(){
							update(-1);});;
			}
			function update(delta){
				if(delta == 1){
					$('#shifting li:eq(' + (current + 0) + ')').hide().css('margin-left', margin);
				} else if(delta == -1){
					$('#shifting li:eq(' + (current + 1) + ')').hide();
				}
				current+=delta;
				wait=0;
				$('p.log').text('margin: ' + margin + ' , current: ' + current);
			}
			function initShifting(cur){
				current = cur;
				margin = $('#shifting li').css('margin-left');
				width = $('#shifting li').width();
				total = $('#shifting li').size();
				$('ul#shifting').append('<li>End of lecture</li>');
				$('#shifting li').hide();
				$('#shifting li:eq(' + (current + 0) + ')').show();
				$('#shifting li:eq(' + (current + 1) + ')').show();
				bindEvents();
			}
			function bindEvents(){
				$('a.move.left').click(function(e){
					e.preventDefault();
					prev();
				});
				$('a.move.right').click(function(e){
					
					e.preventDefault();
					next();
				});
			}
			
			$(function(){
				initShifting(4);
			});
		</script>
	</head>
	<body>
		<p class="log"> ... </p>
		<div class="slidingList_outer">
			<div class="slidingList_inner">
				<a class="move left" href="a">&lt;</a><a class="move right" href="b">&gt;</a>
				<ul id="shifting">
					<li>123</li><!--
					--><li>456</li><!--
					--><li>789</li><!--
					--><li>abc</li><!--
					
					--><li>edf</li><!--
					--><li>ghj</li><!--
					--><li>!@#</li><!--
					--><li>$%^</li><!--
					--><li>ABC</li>
				</ul>
			</div>
		</div>
	</body>
</html>